<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <link rel="stylesheet" href="./style.css">
    <title>Player with Callback Demo</title>

    <style>
      button {
        display: block;
        margin-bottom: 14px;
      }
      #keys table {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>mm.Player with callback</h1>
    <p>An <code>mm.Player</code> also takes an optional <code>CallbackObject</code>, which allows you
      to specify a method to be called after every played note. This is useful
      if you want to sync the audio to a visualization, like below.
    </p>
    <h2>Piano</h2>
    <section>
      <div id='keys'>
        <table cellpadding=0 cellspacing=0>
          <tr>
            <td><div id='top_c' style='width:10px;height:30px;background:white'>&nbsp;</div></td>
            <td colspan=3><div id='c_sharp' style='width:10px;height:30px;background:black'>&nbsp;</div></td>
            <td><div id='top_d' style='width:10px;height:30px;background:white'>&nbsp;</div></td>
            <td colspan=3><div id='d_sharp' style='width:10px;height:30px;background:black'>&nbsp;</div></td>
            <td><div id='top_e' style='width:10px;height:30px;background:white'>&nbsp;</div></td>
            <td><div id='e_f_sep' style='width:1px;height:30px;background:black'>&nbsp;</div></td>
            <td><div id='top_f' style='width:10px;height:30px;background:white'>&nbsp;</div></td>
            <td colspan=3><div id='f_sharp' style='width:10px;height:30px;background:black'>&nbsp;</div></td>
            <td><div id='top_g' style='width:10px;height:30px;background:white'>&nbsp;</div></td>
            <td colspan=3><div id='g_sharp' style='width:10px;height:30px;background:black'>&nbsp;</div></td>
            <td><div id='top_a' style='width:10px;height:30px;background:white'>&nbsp;</div></td>
            <td colspan=3><div id='a_sharp' style='width:10px;height:30px;background:black'>&nbsp;</div></td>
            <td><div id='top_b' style='width:10px;height:30px;background:white'>&nbsp;</div></td>
          </tr>
          <tr>
            <td><div id='bottom_c' style='width:10px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='right_bottom_c' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='c_d_sep' style='width:2px;height:20px;background:black'>&nbsp;</div></td>
            <td><div id='left_bottom_d' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='bottom_d' style='width:10px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='right_bottom_d' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='d_e_sep' style='width:2px;height:20px;background:black'>&nbsp;</div></td>
            <td><div id='left_bottom_e' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='bottom_e' style='width:10px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='bottom_e_f_sep' style='width:1px;height:20px;background:black'>&nbsp;</div></td>
            <td><div id='bottom_f' style='width:10px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='right_bottom_f' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='f_g_sep' style='width:2px;height:20px;background:black'>&nbsp;</div></td>
            <td><div id='left_bottom_g' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='bottom_g' style='width:10px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='right_bottom_g' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='g_a_sep' style='width:2px;height:20px;background:black'>&nbsp;</div></td>
            <td><div id='left_bottom_a' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='bottom_a' style='width:10px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='right_bottom_a' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='a_b_sep' style='width:2px;height:20px;background:black'>&nbsp;</div></td>
            <td><div id='left_bottom_b' style='width:4px;height:20px;background:white'>&nbsp;</div></td>
            <td><div id='bottom_b' style='width:10px;height:20px;background:white'>&nbsp;</div></td>
          </tr>
        </table>
      </div>
      <div>
          <table>
            <tr>
              <td><div id='pianoClick1' style='width:50px;background:grey'>&nbsp;</div></td>
              <td><div id='pianoClick2' style='width:50px;background:grey'>&nbsp;</div></td>
              <td><div id='pianoClick3' style='width:50px;background:grey'>&nbsp;</div></td>
              <td><div id='pianoClick4' style='width:50px;background:grey'>&nbsp;</div></td>
            </tr>
          </table>
        </div>
      <br>
      <div id='mel-button-div'></div>
    </section>

    <h2>Drums</h2>
    <section>
      <div id='drums'>
        <table>
          <tr>
            <td><div id='drum1' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum2' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum3' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum4' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum5' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum6' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum7' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum8' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drum9' style='width:50px;background:grey'>&nbsp;</div></td>
          </tr>
        </table>
      </div>
      <div>
        <table>
          <tr>
            <td><div id='drumClick1' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drumClick2' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drumClick3' style='width:50px;background:grey'>&nbsp;</div></td>
            <td><div id='drumClick4' style='width:50px;background:grey'>&nbsp;</div></td>
          </tr>
        </table>
      </div>
      <br>
      <div id='drums-button-div'></div>
    </section>


    <script src="callback_player_bundle.js"></script>
  </body>
</html>
